<template>
  <div class="login-c">
    <div class="login">
      <div class="title">
        <p>scrcnet</p>
        <p>scrcnet 平台数据管理系统</p>
      </div>
      <!-- 表单验证开始 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
      >
        <!-- 用户名 -->
        <el-form-item prop="tel">
          <el-input
            v-model="ruleForm.tel"
            placeholder="用户名"
            clearable
            prefix-icon="el-icon-user"
            autofocus
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="密码"
            clearable
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <!-- 忘记密码 -->
        <div class="forget">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <span @click="$router.push('/forget')" class="cursor"
            >忘记密码？</span
          >
        </div>

        <br />
        <!-- 登陆 -->
        <el-form-item>
          <el-button class="login-btn" @click="login">登陆</el-button>
        </el-form-item>
      </el-form>
      <!-- 社交账号登陆 -->
      <div class="social">
        <div class="soc cursor">
          社交账号登入
          <i class="fa fa-weixin fa-2x"></i>
          <i class="fa fa-qq fa-2x"></i>
          <i class="fa fa-weibo fa-2x"></i>
        </div>
        <div class="reg cursor" @click="$router.push('/register')">
          注册账号
        </div>
      </div>
      <div class="footer">
        <div class="top cursor">scrcnet</div>
        <div class="bottom cursor">
          <span>获取授权</span>
          <span>在线演示</span>
          <span>前往官网</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const Base64 = require("js-base64").Base64;
export default {
  data() {
    return {
      lang: "zh",
      ruleForm: {
        // 手机号
        tel: "",
        // 表单验证密码
        password: ""
      },
      checked: "",
      //   表单校验规则
      rules: {
        //   用户名验证

        tel: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur"]
          },
          {
            // pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: "4到16位（字母，数字，下划线，减号）"
          }
        ],
        // 密码验证
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur"]
          },
          {
            // pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: "密码至少包含 数字和英文，长度6-20"
          }
        ]
      }
    };
  },
  mounted() {
    // 记住密码功能
    let tel = localStorage.getItem("reTel");
    let password = localStorage.getItem("repd");
    this.ruleForm.tel = tel;
    this.ruleForm.password = password;
  },

  methods: {
    //   获取token
    // async gettk() {
    //   const res = await this.$axios.post("/api/test/test/gettoken");
    //   console.log(res);

    //   登陆
    async login() {
      try {
        await this.$refs.ruleForm.validate();

        const res = await this.$axios.post(
          "/api/login/login/login",
          this.ruleForm
        );
        const { code, data } = res.data;
        console.log(data);
        if (code === 200) {
          localStorage.setItem("token", data.token);
          localStorage.setItem("user_id", data.id);
          localStorage.setItem("user", JSON.stringify(data));

          this.$router.push("/home");
          this.$message({
            message: "登录成功",
            type: "success"
          });
        }
      } catch (e) {
        console.log("表单验证失败");
        this.$message.warning("填写有误");
      }
      // 判断是否点击记住密码
      if (this.checked) {
        let reTel = this.ruleForm.tel;
        let repd = this.ruleForm.password;
        localStorage.setItem("reTel", reTel);
        localStorage.setItem("repd", repd);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login-c {
  padding-top: 120px;

  .login {
    width: 375px;
    height: 481px;
    margin: 0 auto;
    .title {
      text-align: center;
      padding: 20px;
      p:nth-child(1) {
        font-size: 30px;
        margin-bottom: 5px;
      }
      p:nth-child(2) {
        font-size: 16px;
        color: #999;
      }
    }
    .el-form {
      padding: 20px;
      .login-btn {
        background-color: #009688;
        color: #fff;
        width: 100%;
      }
      .forget {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        span {
          font-size: 14px;
          color: #029789;
        }
      }
    }
    .social {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 14px;
      align-items: center;
      .soc {
        color: #999;
        i:nth-child(1) {
          color: aquamarine;
        }
        i:nth-child(2) {
          color: blue;
          padding: 0 8px;
        }
        i:nth-child(3) {
          color: red;
        }
      }
      .reg {
        color: #029789;
      }
    }
  }
  .footer {
    font-size: 14px;
    color: #999;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    .top {
    }
    .bottom {
      margin: 20px;
      span:nth-child(2) {
        margin: 0 20px;
      }
    }
  }
}
</style>
